<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: zhanwang
 * @LastEditTime: 2021-11-15 10:54:03
-->
<template>
  <continer>
    <template slot="content">
      <el-form
        class="m7-form"
        :label-position="labelPosition"
        :model="formData"
        size="mini"
        :rules="rules"
        ref="nodeForm"
      >
        <el-form-item label="节点名称" prop="name">
          <el-input v-model="formData.name" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="转接类型">
          <el-select
            v-model="formData.callType"
            placeholder="请选择转接类型"
            prop="callType"
            @change="callTypeChange"
          >
            <el-option label="转座席工号" value="0"></el-option>
            <el-option label="转技能组" value="1"></el-option>
            <el-option label="转直线号码" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="座席工号"
          prop="callValue"
          v-if="formData.callType === '0'"
          :rules="[
            { required: true, message: '座席工号必填', trigger: 'change' }
          ]"
        >
          <!-- <el-select v-model="formData.callValue">
            <el-option label="技能组" value="voice"></el-option>
          </el-select> -->
          <!-- <m7Select
            size="mini"
            v-model="formData.callValue"
            :placeholder="'请选择座席'"
            filterable
            :multiple="false"
            :collapse-tags="false"
            clearable
            :options="userList"
            :remote="true"
            :defaultProps="{ label: 'agentNumber', value: 'agentNumber' }"
          >
          </m7Select> -->
          <el-cascader
            style="width: 100%"
            @change="handleChange"
            filterable
            v-model="formData.callValue"
            :options="agentCascaderList"
            :props="{ label: 'isAgentName', value: 'agentNumber', emitPath:false }">
          </el-cascader>
        </el-form-item>
        <el-form-item
          label="技能组"
          prop="callValue"
          v-if="formData.callType === '1'"
          :rules="[
            { required: true, message: '技能组必填', trigger: 'change' }
          ]"
        >
          <!-- <m7Select
            size="mini"
            v-model="formData.callValue"
            :placeholder="'请选择技能组'"
            filterable
            :multiple="false"
            :collapse-tags="false"
            clearable
            :options="queueList"
            :remote="true"
            :defaultProps="{ label: 'name', value: '_id' }"
          >
          </m7Select> -->
          <el-cascader
            style="width: 100%"
            @change="handleChange"
            filterable
            v-model="formData.callValue"
            :options="queueCascaderList"
            :props="{ label: 'name', value: '_id', emitPath:false }">
          </el-cascader>
        </el-form-item>
        <div style="display: flex">
          <el-form-item label="来电记忆" class="two-inline" v-if="formData.callType === '1'" >
            <span slot="label">
              来电记忆
              <el-tooltip
                class="item"
                effect="dark"
                content="根据来电号码，判断有效期内，上一次此技能组接待的座席，优先指派给上一次接待座席。如果座席忙碌或者不在线，执行技能组分配规则在技能组内流转或溢出。"
                placement="top"
              >
                <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
              </el-tooltip>
            </span>

            <el-switch
              v-model="formData.callMemory"
              active-text="开"
              inactive-text="关">
            </el-switch>
          </el-form-item>
          <el-form-item  label="有效期" prop="memoryExpire" class="two-inline" v-if="formData.callType === '1' &&  formData.callMemory === true"  :rules="[
              { required: true, type: 'number', message: '请输入1-30之间的整数', min: 1 , max: 30, trigger: 'change' }
            ]">
          <el-input type="text" v-model.number="formData.memoryExpire"  >
          <template slot="append">天</template>
          </el-input>
          </el-form-item>

        </div>

        <el-form-item
          label="直线号码类型"
          prop="lineNumberType"
          v-if="formData.callType === '2'"
          :rules="[
            { required: true, message: '直线号码类型必选', trigger: 'change' }
          ]"
        >
          <el-select v-model="formData.lineNumberType" placeholder="请选择">
            <el-option label='输入号码' value="number"></el-option>
            <el-option label='自定义参数' value="custom"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="直线号码"
          prop="callValue"
          v-if="formData.callType === '2' && formData.lineNumberType === 'number'"
          :rules="[
            { required: true, message: '直线号码必填', trigger: 'change' }
          ]"
        >
          <el-input v-model="formData.callValue" size="mini"></el-input>
        </el-form-item>
        <el-form-item
          label="自定义参数"
          prop="lineNumberType"
          v-if="formData.callType === '2' && formData.lineNumberType === 'custom'"
          :rules="[
            { required: true, message: '直线号码必选', trigger: 'change' }
          ]"
        >
          <el-select v-model="formData.callValue" filterable clearable placeholder="请选择">
            <el-option
              v-for="item in customParametersList"
              :key="item.key"
              :label="item.name"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="语音文件" prop="transferVoice">
          <div style="display: flex">
            <m7Select
              size="mini"
              v-model="formData.transferVoice"
              :placeholder="'请选择语音文件'"
              filterable
              :multiple="false"
              :collapse-tags="false"
              :options="voiceLibraryList"
              clearable
              :remote="true"
              :defaultProps="{ label: 'name', value: '_id' }"
            >
            </m7Select>
            <AudioProgress
              ref="audioProgressRef"
              class="audioProgress"
              :row="currentVoice"
              :showDowload="false"
              :showListen="true"
              type="common"
              :url="currentVoice.fileUrl"
              v-if="currentVoice.fileUrl"
            ></AudioProgress>
          </div>
        </el-form-item>
        <el-form-item
          :label="item.label"
          prop="region"
          v-for="(item, index) in condition"
          filterable
          :key="index"
        >
          <span slot="label">
            {{item.label}}
            <el-tooltip
              class="item"
              effect="dark"
              :content="index | getTip"
              placement="top"
            >
              <span class="V7_iconfont V7_iconV7tubiao_bangzhu-42 tip-span"></span>
            </el-tooltip>
          </span>
          <el-select
            v-model="item.to"
            placeholder="请选择下一步节点"
            clearable
            style="width: 100%"
          >
            <el-option
              v-for="(node, index) in nodeList"
              :label="node.data.name"
              :value="node.id"
              v-show="!node.viewOnly && node.id !== currentData.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template slot="oprate">
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template slot="remove">
      <el-button @click="deleteNode" type="danger" size="mini">删除</el-button>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator'
import continer from '@/components/configCommon/ui-modules/drawer-container.vue'
import nodeEidtMixins from './nodeEidtMixins'
import remoteSelect from '@/components/configCommon/operate-modules/remoteSearch/index.vue'
import { deepClone } from '@/utils/common'
@Component({
  name: 'ivr-node-transfer',
  components: { continer, remoteSelect },
  filters: {
    getTip (index) {
      if (index === 0) {
        return '超过技能组最大排队时间溢出'
      } else if (index === 1) {
        return '超过技能组最大排队数溢出'
      } else if (index === 2) {
        return '技能组有无效座席时溢出，或者参数值为空时进入此节点'
      }
    }
  }
})
export default class extends Mixins(nodeEidtMixins) {
  private callTypeChange () {
    this.$set(this.formData, 'callValue', '')
    this.$set(this.formData, 'callMemory', false)
    this.$set(this.formData, 'memoryExpire', 7)
  }

  get customParametersList () {
    const list = this.data.nodeList.find(item => item.id === 'startNode').data?.customList?.filter(i => i.key) || []
    list.forEach(i => {
      i.name = `${i.key} ${i.memo}`
    })
    return list
  }

  get agentCascaderList () { //  座席级联数据
    // 座席列表
    const userList = deepClone(this.userList) || []
    userList.forEach(i => {
      i.isAgentName = `${i.agentNumber} ${i.agentName}`
    })
    //  得到开始节点中的自定义参数数据
    const customList = deepClone(this.customParametersList)
    customList.forEach(i => {
      i.isAgentName = i.name
      i.agentNumber = i.key
    })
    const list = [
      {
        agentNumber: 'fixed',
        isAgentName: '系统座席',
        children: userList
      },
      {
        agentNumber: 'custom',
        isAgentName: '自定义参数',
        children: customList
      }
    ]
    return list
  }

  get queueCascaderList () { // 技能组级联数据
    const customList = deepClone(this.customParametersList)
    customList.forEach(i => {
      i._id = i.key
    })
    const list = [
      {
        key: 'fixed',
        name: '技能组',
        children: this.queueList
      },
      {
        key: 'custom',
        name: '自定义参数',
        children: customList
      }
    ]
    return list
  }

  /**
   * variableType: custom(自定义) fixed(非自定义变量)
   * variableName: 自定义变量名称
   */
  private handleChange (val) {
    const flag = this.customParametersList.find(i => i.key === val)
    this.formData.variableType = flag ? 'custom' : 'fixed'
    this.formData.variableName = flag ? val : ''
  }
  // private created () {
  //   console.log(this.customParametersList, 1122)
  // }
}
</script>
<style lang="stylus" scoped>
.audioProgress
  margin 0 10px 0
.tip-span
  color $icon-gray
  font-size 12px
  cursor pointer
.two-inline
  display: inline-block
  width 50%
</style>
